<template>
	<div class="setting-user">
		<div class="setting-card">
			<div class="setting-item-title">个人简介</div>
			<div class="setting-item-content">
		    	<markdown-editor v-model="form.content" :configs="markdownOption" :highlight="true"></markdown-editor>
			</div>
		</div>
		<sub-foot :prompt="prompt" :loading="loading" @saveChange="save"></sub-foot>
	</div>
</template>

<script>
	import {markdownEditor} from 'vue-simplemde'
	import SubFoot from 'components/setting/sub-foot'

	export default {
		data() {
			return {
				prompt: '这些将控制关于我页面(about)内容',
				form: {
					content: ''
				},
				markdownOption: {
                    status: true,
                    renderingConfig: {
                        codeSyntaxHighlighting: true,
                        highlightingTheme: 'atom-one-light'
                    }
                },
				loading: false
			}
		},
		created() {
			this.__getUserInfo()
		},
		methods: {
			save() {
				this.loading = true
				this.$http.post('setUserInfo',this.form).then((response) => {
					this.loading = false
					this.$notify({
			          title: '个人设置操作成功',
			          message: '缓存将在10分钟后重新生成',
			          type: 'success'
			        })
				})
			},
			__getUserInfo() {
				this.$http.get('userInfo').then((response) => {
					this.form.content = response.data
				})
			}
		},
		components: {
			markdownEditor,SubFoot
		}
	}
</script>

<style scope>
@import '../../../static/css/simplemk.css'
</style>